<template>
  <div
    class="fixed text-[#ffffffd1] top-[30px] left-0 bg-[rgba(0,0,0,0.4)] w-[100vw] h-[calc(100vh-30px)] z-[999] flex items-center justify-center"
  >
    <div class="w-[700px] rounded-[15px]">
      <div
        class="relative border select-none border-solid border-[var(--border-color)] w-[100%] h-[50px] bg-[#232324] flex items-center rounded-tl-[15px] rounded-tr-[15px]"
      >
        <div class="w-[50%] pl-[20px]">功能</div>
        <div class="w-[50%] h-[50px] leading-[50px] pl-[20px]">快捷键</div>

        <el-icon
          class="absolute top-[-5px] right-[10px] cursor-pointer"
          @click="close"
          ><Close
        /></el-icon>
      </div>

      <div
        v-for="(item, i) in shortKeyList"
        :key="item.name"
        :class="{
          'rounded-br-[15px] rounded-bl-[15px] ': i === shortKeyList.length - 1,
        }"
        class="select-none border border-solid border-[var(--border-color)] w-[100%] h-[40px] flex items-center bg-[#18181C]"
      >
        <div class="w-[50%] pl-[20px]">{{ item.name }}</div>
        <div class="w-[50%] h-[40px] leading-[40px] pl-[20px] left_border">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { shortKeyList } from "@renderer/hooks/useShortKey";
import { arrayBuffer } from "stream/consumers";

interface Tprops {
  showShortKeys: boolean;
}
let props = withDefaults(defineProps<Tprops>(), {
  showShortKeys: false,
});

const emit = defineEmits(["update:showShortKeys"]);

const close = () => {
  emit("update:showShortKeys", false);
};
</script>

<style scoped lang="scss">
.left_border {
  border-left: 1px solid var(--border-color);
}
</style>
